                <template>
                    <div class="title-box">
                        <p id="switchBtn"><span class="active" data-dataType="income">人口出入时间段统计</span></p>
                    </div>
                    <div ref="chartRef" class="line-chart"></div>
                </template>

                <script setup>
                import { ref, onMounted, onBeforeUnmount } from 'vue';
                import * as echarts from 'echarts/core';
                import { LineChart } from 'echarts/charts';
                import { TooltipComponent, GridComponent } from 'echarts/components';
                import { CanvasRenderer } from 'echarts/renderers';

                echarts.use([LineChart, TooltipComponent, GridComponent, CanvasRenderer]);

                const chartRef = ref(null);
                let chartInstance = null;

                const option = {
                    color: ['#7FFF00'],
                    tooltip: { trigger: 'axis' },
                    grid: { left: 40, top: 30, right: 5, bottom: 20 },
                    xAxis: [{
                        type: 'category',
                        data: ['6:00-9:00', '10:00-12:00', '13:00-15:00', '16:00-20:00', '21:00-24:00'],
                        axisLabel: { color: "#7FFF00" }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: { color: "#7FFF00" }
                    }],
                    series: [{
                        name: '人次',
                        type: 'line',
                        data: [800, 300, 500, 800, 300],
                        smooth: true
                    }]
                };

                onMounted(() => {
                    chartInstance = echarts.init(chartRef.value, 'macarons');
                    chartInstance.setOption(option);
                });
                onBeforeUnmount(() => {
                    if (chartInstance) {
                        chartInstance.dispose();
                    }
                });
                </script>

                <style scoped>
                .title-box {
                    width: 14.4rem;
                    height: 2.72rem;
                    background: url(../icons/box_title.png) top left no-repeat;
                    background-size: 100% 100%;
                    margin: auto;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    position: relative;
                }
                .title-box>h6,
                .title-box>p {
                    font-size: 0.96rem;
                    color: white;
                    height: 0.68rem;
                    line-height: 0.68rem;
                    margin-left: 0.6rem;
                }
                .title-box>p>span.active {
                    font-size: 0.96rem;
                    color: rgba(255, 255, 255, 1);
                }
                .title-box>p>span {
                    cursor: pointer;
                    color: rgba(255, 255, 255, .6);
                }
                .title-box>p>span.active {
                    color: rgba(255, 255, 255, 1);
                }
                .line-chart {
                    width: 90%;
                    height: 160px;
                    margin-left: 10px;
                }
                </style>